<template>
  <div class="sc_01-screen">
    <div class="screen_wrapper">
      <div class="video_wrapper">
        <div class="video_gradient"></div>
        <video muted="" playsinline="" loop="" autoplay="" class="video_target">
          <source src="/src/assets/hero_video.mp4" type="video/mp4" />
        </video>
      </div>

      <h1 :class="['content_title', locale === 'zh' ? 'title-zh' : 'title-en']">{{ $t('firstContentMainTitle1') }}<span
          class="title_underline">AI<div class="underline">
          </div></span>{{ $t('firstContentMainTitle2') }}</h1>
      <div class="content_ctn">
        <p :class="['ctn_p', locale === 'zh' ? 'p-zh' : 'p-en']">
          {{ $t('firstContentSubTitle') }}
        </p>
        <a class="ctn_button" href="/">
          <div v-html="$t('firstContentButton')"></div>
          <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon">
            <path
              d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
            </path>
          </svg>
        </a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

const { locale } = useI18n();
computed(() => locale.value);
</script>

<style scoped lang="less">
.sc_01-screen {
  width: 100%;
  background: rgb(0, 32, 37);
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  min-height: 100vh;
  margin-top: -1px;

  @media screen and (min-width: 1441px) {
    padding-top: 172px;
    padding-bottom: 175px;
  }

  @media screen and (min-width: 1025px) and (max-width: 1440px) {
    padding-top: 11.944vw;
    padding-bottom: 12.153vw;
  }

  @media screen and (min-width: 501px) and (max-width: 1024px) {
    padding-top: 19.531vw;
    padding-bottom: 18.262vw;
  }

  @media screen and (max-width: 500px) {
    padding-top: 34.4vw;
    min-height: 0;
    padding-bottom: 12.262vw;
  }

  .screen_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;

    @media screen and (min-width: 1441px) {
      width: 1216px;
      padding-bottom: 107px;
      gap: 40px;
      height: 566px;
    }

    @media screen and (min-width: 1025px) and (max-width: 1440px) {
      width: 84.444vw;
      padding-bottom: 7.431vw;
      gap: 2.778vw;
      height: 39.306vw;
    }

    @media screen and (min-width: 501px) and (max-width: 1024px) {
      position: initial;
      width: 90.234vw;
      gap: 3.906vw;
    }

    @media screen and (max-width: 500px) {
      width: 90.133vw;
      gap: 6.667vw;
    }

    .video_wrapper {
      position: absolute;
      z-index: -1;
      @media screen and (min-width: 1441px) {
        width: 666px;
        height: 429px;
        border-radius: 26px;
        bottom: 0px;
        right: 0px;
      }

      @media screen and (min-width: 1025px) and (max-width: 1440px) {
        width: 46.25vw;
        height: 29.792vw;
        border-radius: 1.84vw;
        bottom: 0px;
        right: 0px;
      }

      @media screen and (min-width: 501px) and (max-width: 1024px) {
        position: initial;
        border-radius: 3.113vw;
        height: 52.246vw;
      }

      @media screen and (max-width: 500px) {
        position: relative;
        border-radius: 3.113vw;
      }

      .video_gradient {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 183px;
        width: 100%;
        z-index: 2;
        background: linear-gradient(178.79deg, rgba(36, 67, 72, 0.35) 1.03%, rgba(36, 67, 72, 0) 94.15%);


        @media screen and (min-width: 1025px) {
          height: 11vw;
        }

        @media screen and (max-width: 1024) {
          display: none !important;
        }
        @media screen and (max-width: 500) {
          display: none !important;
        }
      }

      .video_target {
        background-color: rgb(36, 67, 72);
        object-fit: cover;
        position: relative;
        z-index: -1;
        width: 100%;
        height: 100%;
        border: 1px solid rgb(69, 92, 96);
        border-radius: 3.113vw;
      }
    }

    .content_title {
      color: rgb(255, 255, 250);
      font-weight: 500;

      &.title-en {
        font-family: Gellix;
        font-size: 90px;
        letter-spacing: -0.04em;
        line-height: 85%;

      }

      &.title-zh {
        font-family: Microsoft YaHei;
        font-size: 80px;
        line-height: 120%;
      }

      @media screen and (min-width: 1441px) {
        width: 764px;
      }

      @media screen and (min-width: 1025px) and (max-width: 1440px) {
        width: 53.056vw;
        font-size: 6.25vw !important;
      }

      @media screen and (min-width: 501px) and (max-width: 1024px) {
        width: 89vw;
        font-size: 9vw !important;
      }

      @media screen and (max-width: 500px) {
        font-size: 9.6vw !important;
        letter-spacing: -0.03em !important;
        line-height: 115% !important;
        width: 88.867vw;
        order: -1;
      }

      .title_underline {
        position: relative;
        display: inline-block;

        .underline {
          position: absolute;
          left: 0px;
          bottom: 0;
          width: 100%;
          background-image: linear-gradient(277.33deg, rgb(252, 227, 68) -2.48%, rgb(121, 250, 75) 47.21%, rgb(48, 215, 241) 93.62%);
          border-radius: 2px;
          margin-top: 0px;

          @media screen and (min-width: 501px) {
            height: 2px;
          }

          @media screen and (max-width: 500px) {
            height: 2px;
            margin-top: -3px;
          }

        }
      }
    }

    .content_ctn {
      @media screen and (min-width: 501px) and (max-width: 1024px) {
        gap: 4.688vw;
        display: flex;
        flex-direction: row-reverse;
        -webkit-box-pack: end;
        justify-content: flex-end;
      }

      .ctn_p {
        color: rgb(255, 255, 250);
        line-height: 130%;

        &.p-en {
          font-family: Gellix;
          font-size: 22px;
          letter-spacing: 0px;
          font-weight: 400;
        }

        &.p-zh {
          font-family: Microsoft YaHei;
          font-size: 20px;
          letter-spacing: 1px;
          font-weight: 300;

        }

        @media screen and (min-width: 1441px) {
          width: 455px !important;
          margin-bottom: 40px !important;
        }

        @media screen and (min-width: 1025px) and (max-width: 1440px){
          font-size: 1.528vw !important;
          width: 31.597vw !important;
          margin-bottom: 2.778vw !important;
        }

        @media screen and (min-width: 501px) and (max-width: 1024px) {
          width: 46.8vw !important;
          font-size: 2.148vw !important;
        }

        @media screen and (max-width: 500px) {
          width: 88vw !important;
          margin-bottom: 5.3vw !important;
          font-size: 5.867vw !important;
        }
      }

      .ctn_button {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        position: relative;
        color: rgb(0, 32, 37);
        width: fit-content;
        background: linear-gradient(277.33deg,
            rgb(252, 227, 68) -2.48%,
            rgb(121, 250, 75) 47.21%,
            rgb(48, 215, 241) 93.62%) center center / calc(100% + 6px);
        border: 1px solid transparent;
        border-radius: 999px;
        cursor: pointer;
        z-index: 1;
        font-family: Gellix;
        font-weight: 500;
        font-size: 20px;
        letter-spacing: -0.02em;
        line-height: 130%;
        padding: 18px 30px;
        gap: 15px;

        @media screen and (min-width: 1025px) {
          font-size: 1.4vw;
          padding: 1.2vw 2vw;
          gap: 1vw;
        }

        @media screen and (min-width: 501px) and (max-width: 1024px) {
          padding: 1.8vw 3vw;
          gap: 1.5vw;
          font-size: 2vw;
        }

        @media screen and (max-width: 500px) {
          padding: 4.8vw 8vw;
          gap: 4vw;
          font-size: 5.333vw;
        }

        .icon {
          fill: rgb(0, 32, 37);
          transition: transform 0.2s ease-in-out 0s;
          width: 23px;
          height: 8px;

          @media screen and (min-width: 1025px) {
            width: 1.597vw;
            height: 0.556vw;
          }

          @media screen and (min-width: 501px) and (max-width: 1024px) {
            width: 2.246vw;
            height: 0.781vw;
          }

          @media screen and (max-width: 500px) {
            width: 6.133vw;
            height: 2.133vw;
          }
        }
      }
    }
  }
}
</style>
